<template>
  <div class="page-container">

    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>拼团</el-breadcrumb-item>
        <el-breadcrumb-item>拼团活动列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters"  :size="size" ref="filters">

        <!-- 搜索条件部分 -->
        <el-row class="times">
          <el-form-item prop="startTime" label="活动时间：" >
            <el-date-picker
              v-model="filters.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="开始时间"
              class="input_postion"
              clearable
              @change="changeStartDate"
              :picker-options="startDateDisabled"
            ></el-date-picker>
          </el-form-item>
          <span class="times-to">-</span>
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="filters.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="结束时间"
              class="input_postion"
              clearable
              @change="changeEndDate"
              :picker-options="endDateDisabled"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="creatorNameForSearch" label="创建人：">
            <el-input v-model="filters.creatorNameForSearch" placeholder="创建人" clearable maxlength="80"></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-input">
          <el-form-item prop="promName" label="活动名称：">
            <el-input v-model="filters.promName" placeholder="拼团活动名称" clearable maxlength="80"></el-input>
          </el-form-item>
          <el-form-item prop="groupCode" label="活动ID：">
            <el-input v-model="filters.groupCode" placeholder="拼团活动ID" clearable></el-input>
          </el-form-item>
          
        </el-row>


        <!-- 按钮操作部分 -->

        <el-row class="search-button">
          <el-form-item>
            <kt-button :label="$t('action.reset')" class="resetButton" icon="el-icon-refresh" @click="resetForm('filters')" />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              label="搜索"
              class="searchButton"
              @click="search('filters')"
            />
          </el-form-item>

          <el-form-item>
          <kt-button label="创建活动" @click="createPage()" class="searchButton" />
        </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tab-container">
      <el-tabs v-model="activeName"  >
        <el-tab-pane
          v-for="item in tabMapOptions"
          :key="item.key"
          :label="item.label"
          :name="item.key"
        >
          <tabPane
            v-if="activeName==item.key"
            :type="item.key"
            :promName="filters.promName"
            :creatorName="filters.creatorName"
            :id="filters.id"
            :groupCode="filters.groupCode"
            :channelCodes="filters.channelCode"
            :channelId="filters.channelId"
            :startTime="filters.startTime"
            :endTime="filters.endTime"
            :creatorNameForSearch="filters.creatorNameForSearch"
            v-on:SecondSell="SecondSell"
            ref="tabPaneChild"
          />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--弹出框-->
    <el-dialog title="请选择秒杀/拼团/满额促销形式" :visible.sync="flag" center class="el-dialog-form" :close-on-click-modal="false">
      <div class="flex mb20">
        <p class="form-left-width">活动类型：</p>
        <el-select v-model="form.region" placeholder="请选择秒杀/拼团/满额促销形式">
          <el-option label="秒杀" value="one"></el-option>
          <el-option label="拼团" value="two"></el-option>
          <el-option label="满额促销" value="three"></el-option>
        </el-select>
      </div>
      <div class="flex mb20">
        <p class="form-left-width">当前参与用户：</p>
        <el-checkbox-group v-model="joinCheck">
          <el-checkbox v-for="item in joinList" :label="item" :key="item" class="mr20 el-checkBox-padding noMarginLeft" border></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="flex mb20">
        <p class="form-left-width">推送方式：</p>
        <el-checkbox-group v-model="wayCheck">
          <el-checkbox v-for="item in wayList" :label="item" :key="item" class="mr20 el-checkBox-padding noMarginLeft" border></el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="flag = false" class="cancelButton">取 消</el-button>
        <el-button type="primary" @click="checked" class="searchButton">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import tabPane from "./components/TabPaneCreateGroupon";
export default {
  name: "Tab",
  components: {
    tabPane,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    let checkId = (rule, value, callback) => {
      if(value == null || typeof(value)=="undefined"  || value == ''){
        callback();
      }
      let reg = /^[1-9]\d*$/;
      if(!reg.test(value)) {
        callback(new Error('请输入数字'));
      }
      callback();
    };
    return {
      channelOption:[],
      dataFormRules: {
        //templateName: { min: 0, max: 80, message: "字数0-80个字符", trigger: "blur" },
      },
      // 模板对话框
      useTempDialogVisible:false,
      tableData: [],

      flag: false,
      form: {
        region: ""
      },
      tabMapOptions: [
        { label: '全部', key: '0'},
        { label: '进行中', key: '5' },
        { label: '已结束', key: '8' },
        { label: '已过期', key: '6' },
        { label: '已关闭', key: '7' },
        { label: '未开始', key: '3' },
        { label: '待提交', key: '1' },
        { label: '待审核', key: '2' },
        { label: '审核未通过', key: '4' },
        { label: '活动草稿', key: '9' }
      ],
      activeName: '0',
      createdTimes: 0,
      size: "small",
      align: "left",
      dataForm: {
        id: null,
        promType: 10,  //拼团
        templateName: null
      },
      filters: {
        promName: "",
        id: null,
        groupCode: null,
        creatorNameForSearch: "",
        channelCode: "",
        merchantId: "",
        operatorStoreId: "",
        startTime: "",
        endTime: "",
        storeId: "",
        channelId:null,
      },
      frontPromotionTypes: [
        { frontPromotionType: "", label: "请选择" },
        { frontPromotionType: "0", label: "定金预售" }
      ],
      channelCodes: [{ channelCode: "110001", label: "BBC" }],
      merchantIds: [{ merchantId: null, label: "请选择" }],
      storeIds: [{ storeId: null, label: "请选择" }],
      joinCheck: [],
      joinList: ["已使用用户", "未使用用户"],
      wayCheck: [],
      wayList: ["短信", "小程序", "网站", "H5", "邮件"],
      startDateDisabled: {},//开始时间限制
      endDateDisabled: {},//结束时间限制
      templateLoading:false,
    };
  },
  methods: {
    changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.startTime) {
            return time.getTime() <= new Date(this_.filters.startTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.endTime) {
            return time.getTime() >= new Date(this_.filters.endTime).getTime();
          }
        }
      };
    },
    resetForm(formName) {


      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
      }
      this.$nextTick(() => {
        this.search(formName);
      })
    },

    //重置后查询模板
    rest(){
      this.dataForm={
        promType: 10,
        id: null,
        templateName:null,
      }
      this.tempPageQuery(this.dataForm);

    },

    // 查询模板
    tempPageQuery() {
      debugger
      let callback = res => {
        if (res.code == "0000") {
          this.templateLoading = false;
          this.tableData = res.data.rows;
        }else{
          this.$message({ message: "查询失败", type: "fail" });
        }
      };
      this.templateLoading = true;
      this.utils.request.templatePageQuery(this.dataForm, callback);
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    search(formName) {
      this.$refs['filters'].validate(valid => {
          if (valid) {
            this.$refs.tabPaneChild[0].refreshPageRequest(1);
          }
      })
    },
    createPage() {
      this.$router.push("/GroupActivityComponentsNew?auth=0&active=1");
    },
    checked() {
      this.flag = false;
      if (this.form.region == "one") {
        this.$router.push("/SeckillPromotionEvent" + "?auth=0");
      } else if (this.form.region == "two") {
        this.$router.push("/GroupActivityComponentsNew?auth=0&active=1");
      } else {
        this.$router.push("/CreatePromotion3");
      }
    },
    SecondSell() {
      this.flag = true;
    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`);
    }
  },
  created() {
    const tab = this.$route.query.tab;
    if (tab) {
      this.activeName = tab;
    }
  },
  mounted() {
    // this.queryChannelListOther()
  }
};
</script>

<style scoped lang="scss">
.type {
  display: flex;
  align-items: center;
}
.type p {
  text-align: right;
  margin-right: 20px;
  width: 120px;
}
.noRmargin{
  /deep/ .el-form-item__content{
    margin-right: 0 !important;
  }
}

    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
  border-left: 1px solid #9B9DA3 !important;
  &.is-active {
    border-color: #0090FF !important;
  }
}
</style>
